<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <date-range-picker v-model="createTime" class="date-item" unlink-panels />
        <rrOperation />
      </div>
      <crudOperation :permission="permission" />
    </div>
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data.data"
      :span-method="objectSpanMethod"
      lazy
    >
      <el-table-column align="center" :label="query.createTime && query.createTime.length > 0 ? `${query.createTime[0].split(' ')[0]}至${query.createTime[query.createTime.length-1]}会员数量及收入、支出概要` : '-至-会员数量及收入、支出概要'">
        <el-table-column label="日期" prop="date" align="center" />
        <el-table-column label="会员数量" align="center">
          <el-table-column prop="count" label="普通会员" align="center" />
          <el-table-column prop="vipCount" label="VIP会员" align="center" />
        </el-table-column>
        <el-table-column label="收入金额" align="center">
          <el-table-column prop="vCount" label="会员费用" align="center" />
          <el-table-column prop="aCount" label="内容查看" align="center" />
          <el-table-column prop="qCount" label="咨询费" align="center" />
        </el-table-column>
        <el-table-column label="分成支出金额" align="center">
          <el-table-column prop="vipShareCount" label="会员费" align="center" />
          <el-table-column label="发布内容及咨询" align="center">
            <el-table-column prop="parentShareCount" label="上级" align="center" />
            <el-table-column prop="authorShareCount" label="作者" align="center" />
            <el-table-column prop="clientShareCount" label="客服" align="center" />
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>

    <el-table
      ref="table2"
      v-loading="crud.loading"
      lazy
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :data="crud.data.paySummary"
      row-key="id"
    >
      <el-table-column align="center" :label="query.createTime && query.createTime.length > 0 ? `${query.createTime[0].split(' ')[0]}至${query.createTime[1].split(' ')[0]}付费会员占比` : '-至-日付费会员占比'">
        <el-table-column label="会员总数" prop="total" align="center" />
        <el-table-column label="付费会员数量" align="center">
          <el-table-column label="咨询付费" prop="queryPayCount" align="center" />
          <el-table-column label="内容付费" prop="articlePayCount" align="center" />
          <el-table-column label="购买VIP" prop="vipPayCount" align="center" />
        </el-table-column>
        <el-table-column label="百分比" align="center">
          <el-table-column label="咨询付费" prop="queryPayPercent" align="center" />
          <el-table-column label="内容付费" prop="articlePayPercent" align="center" />
          <el-table-column label="购买VIP" prop="vipPayPercent" align="center" />
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>

import DateRangePicker from '@/components/DateRangePicker'
import CRUD, { crud, header, presenter } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import moment from 'moment'

export default {
  name: 'Dashboard',
  components: { crudOperation, rrOperation, DateRangePicker },
  cruds() {
    return CRUD({ title: '交易记录', url: 'api/statistics/overview' })
  },
  mixins: [presenter(), header(), crud()],
  data() {
    return {
      permission: {
        download: ['admin'],
        add: ['admin', 'statistics:add'],
        edit: ['admin', 'statistics:edit'],
        del: ['admin', 'statistics:del']
      },
      createTime: []
    }
  },
  watch: {
    createTime(value) {
      this.query.createTime = value
      this.crud.refresh()
    }
  },
  mounted() {
    this.crud.optShow = {
      add: false,
      edit: false,
      del: false,
      download: true,
      doExport: () => {
        this.exportData()
      }
    }
    const moment1 = moment()
    this.query.createTime = [moment(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)).format('yyyy-MM-DD') + ' 00:00:00', moment1.format('yyyy-MM-DD') + ' 23:59:59']
    this.createTime = this.query.createTime
    this.crud.refresh()
  },
  methods: {
    // 导出功能
    exportData() {
      const excelName = `${this.query.createTime[0].split(' ')[0]}至${this.query.createTime[this.query.createTime.length - 1].split(' ')[0]}会员数量及收入、支出概要&付费会员占比` + '.xlsx'
      var xlsxParam = { raw: true }// 转换成excel时，使用原始的格式
      // 克隆节点
      const table = this.$refs.table.$el.cloneNode(true)
      const table2 = this.$refs.table2.$el.cloneNode(true)
      // 判断是否为固定列，解决（为固定列时，会重复生成表格）
      const table_sheet1 = this.$XLSX.utils.table_to_sheet(table, xlsxParam)
      const table_sheet2 = this.$XLSX.utils.table_to_sheet(table2, xlsxParam)
      const wb = this.$XLSX.utils.book_new()
      this.$XLSX.utils.book_append_sheet(wb, table_sheet1, '会员数量及收入、支出概要')
      this.$XLSX.utils.book_append_sheet(wb, table_sheet2, '付费会员占比')
      var table_write = this.$XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        this.$FileSaver.saveAs(
          new Blob([table_write], { type: 'application/octet-stream' }),
          excelName
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, table_write)
      }
      return table_write
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 1 || rowIndex === 3 || rowIndex === 5) {
        if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 2
          }
        }
        if (columnIndex === 2) {
          return {
            rowspan: 1,
            colspan: 0
          }
        }
        if (columnIndex === 3) {
          return {
            rowspan: 1,
            colspan: 3
          }
        }
        if (columnIndex === 4 || columnIndex === 5) {
          return {
            rowspan: 1,
            colspan: 0
          }
        }
        if (columnIndex === 6) {
          return {
            rowspan: 1,
            colspan: 4
          }
        }
        if (columnIndex > 6) {
          return {
            rowspan: 1,
            colspan: 0
          }
        }
        return {
          rowspan: 1,
          colspan: 1
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
                                         ::v-deep .el-input-number .el-input__inner {
                                           text-align: left;
                                         }
</style>
